<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-input placeholder="请选择" v-model="tree" disabled>
          <el-button slot="append" @click="queryClick">...</el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-dialog title="树列表" :visible.sync="displayTree" width="60%">
      <el-input
        size="medium"
        placeholder="请输入查询条件"
        v-model="treeQueryCondtion"
        @input="queryTreeData"
      ></el-input>
      <div class="panel paneldefault">
        <div class="panelheading">
          <span class="paneltitle">树列表选择</span>
        </div>
        <div class="panelbody">
          <!-- 树形结构 -->
          <el-tree ref="myTree" highlight-current :data="treeData" :props="treeProps" @node-click="handleNodeClick"
            @dblclick.native="dbclick"
          ></el-tree>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-row>
          <el-col :span="12">
            <el-button type="primary" @click="saveTreeData" :plain="true">保存</el-button>
          </el-col>
          <el-col :span="5">
            <el-button @click="displayTree = false">关闭</el-button>
          </el-col>
        </el-row>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTreeSetByCode_Url, getTreeSetDetailByTreeId_Url, exeTreeSetSqlForOne_Url } from "@/config/compentsapi";

export default {
  name: "treeInput",
  props: {
    treeSetCode: {
      type: String
    },
    queryMap: {
      type: Object
    }
  },
  data() {
    return {
      // tree输入框
      tree:"",
      // tree查询条件
      treeQueryCondtion: "",
      // 查询实体
      queryEntity: this.queryMap,
      // 树形结构显示界面
      displayTree: false,
      // 树形结构数据
      treeData: [],
      // 树形结构配置选项
      treeProps: {
        label: "label" /* 指定节点标签为节点对象的某个属性 */,
        children: "children" /* 指定子树为节点对象的某个属性 */
      },
      // 树形实体
      treeSet: {},
      // 树形详细实体
      treeSetDetail: {},
      // 树形返回的数据
      treeRetrunData: {},
    };
  },
  activated() {},
  methods: {
    // 获得初始化的值
    getData() {
      getTreeSetByCode_Url({
        treeSetCode: this.treeSetCode
      }).then(res => {
        this.treeSet = res.data.data;
        getTreeSetDetailByTreeId_Url({
          treesetId: this.treeSet.treesetId,
          detailCode: ""
        }).then(res => {
          this.treeSet = res.data.data;
        });
      });
    },

    // 双击事件
    dbclick(data) {
      console.log("双击事件已经触发！！！" + JSON.stringify(data));
    },

    // 点击后缀事件
    queryClick() {
      exeTreeSetSqlForOne_Url({
        treesetCode: 'guan001'
      }).then(res => {
        console.log(JSON.stringify(res.data.data));
        this.treeData = res.data.data;
      });
      this.displayTree = !this.displayTree;
    },

    // 查询数据
    queryTreeData() {},
    
    // 保存按钮
    saveTreeData() {
      this.tree = this.treeRetrunData.label;
      this.$emit("listenToTreeInput", this.treeRetrunData);
      this.displayTree = false;
    },
    
    // 树形节点点击事件
    handleNodeClick(data) {
      console.log("树形点击事件====>>>>" + JSON.stringify(data));
      this.treeRetrunData = data;
    }
  }
};
</script>

<style>
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: #91c4ff;
}
.el-tree-node__content:hover {
  background-color: #91c4ff;
}
</style>
